<template>
  <div>
    <div v-if="todoList.length > 0" class="list-wrapper">
      <div v-for="v in todoList" class="item" :key="v.createTime + v.key" @click="() => onEdit(v)">
        <div>
          <mini-btn v-if="v.status > 0" :color="mapColor[v.status]">{{mapStatus[v.status]}}</mini-btn>
          {{v.content}}
        </div>
        <div class="footer">
          <div>
            <mini-btn>{{stopTimeFormat(v.stopTime)}}</mini-btn>
            <mini-btn v-if="v.stopTime - nowTime < 0" color="red" style="margin-left:5px">超时</mini-btn>
          </div>
          <mini-btn color="blue" @click.stop="() => onDone(v)">完成</mini-btn>
        </div>
      </div>
    </div>
    <div v-else class="empty-tips" @click="() => showAddModel = true">
      <span>+</span>
      点我新建大事~
    </div>
    <router-link class="donelist-btn" to="/donelist">已完成待办 >></router-link>
    <add-model v-model:show="showAddModel" @saved="sortHandle" />
    <div class="fixed-btn sort-btn" @click="onSort"><van-icon name="exchange" /></div>
  </div>
</template>

<script>
import addModel from './add'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { Icon, Toast } from 'vant'
import miniBtn from '@/components/mini-btn'
import { stopTimeFormat } from '@/utils/common'
export default {
  components: {
    addModel,
    miniBtn,
    [Icon.name]: Icon
  },
  setup(){
    const store = useStore()
    const router = useRouter()
    const showAddModel = ref(false)

    const onDone = v => {
      store.commit('removeTodoItem', v)
      store.commit('pushDoneItem', v)
    }

    const onEdit = v => {
      router.push({path: '/edit', query: {key: v.key, createTime: v.createTime}})
    }

    // 默认按创建时间排序
    let todoList = computed(() => store.state.todoList)
    const sortRules = ['createTime', 'stopTime', 'status']
    const mapRules = {
      'createTime': '按创建时间排序',
      'stopTime': '按截止时间排序',
      'status': '按紧急程度排序'
    }
    // 当前排序类型（默认按创建时间）
    let currentRule = parseInt(localStorage.getItem('currentRule')) || 0
    // 排序处理主程序
    const sortHandle = () => {
      const k = sortRules[currentRule] // 下标名称
      switch(k){
        case 'stopTime': store.state.todoList.sort((a, b) => b['status'] - a['status']);break // 如果截止时间同级，则优先按紧急程度排序
        case 'status': store.state.todoList.sort((a, b) => a['stopTime'] - b['stopTime']);break // 如果截止紧急程度同级，则优先按截止时间排序
      }
      store.state.todoList.sort((a, b) => {
        switch(currentRule){
          case 1: return a[k] - b[k] // 按截止时间排序则是升序，数值越小离截止时间越短
          case 2: return b[k] - a[k] // 按紧急程度排序则是降序，数值越大紧急程度越高
          default: return b[k] - a[k] // 默认按创建时间排序
        }
      })
    }
    const onSort = () => {
      // 初始化排序类型
      if (currentRule >= sortRules.length - 1) currentRule = 0
      else currentRule++
      localStorage.setItem('currentRule', currentRule)
      Toast(mapRules[sortRules[currentRule]])
      sortHandle()  
    }
    sortHandle()

    return {
      todoList,
      stopTimeFormat,
      nowTime: new Date().getTime(),
      onDone,
      showAddModel,
      onEdit,
      mapColor: [null, 'yellow', 'red', 'red'],
      onSort,
      sortHandle,
      mapStatus: store.state.mapStatus,
    }
  }
}
</script>

<style lang="less" scoped>
.list-wrapper{
  .item{
    padding: .8rem;
    background-color: #fff;
    border-radius: @border-radius;
    margin: .8rem;
    box-shadow: @box-shadow;
    .footer{
      margin-top: .5rem;
      display: flex;
      justify-content: space-between;
    }
  }
}
.donelist-btn{
  display: block;
  color: @primary-color;
  text-decoration: underline;
  text-align: center;
  padding: .5rem;
  margin: .8rem;
}
.empty-tips{
  text-align: center;
  padding: 20% 0;
  color: #ccc;
  span{
    display: block;
    font-size: 4rem;
  }
}
.sort-btn{
  bottom: 105px;
}
</style>